<template>
	<scroll-view class="scroll-list" scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="loadMore">
		<view class="card" v-for="(todo, index) of list" :key="todo.taskId" @click="toHandle(todo)">
			<view class="card-header flex flex-center">
				<view class="card-header-title">{{ todo.procDefName }}</view>
				<view class="card-header-tag">流转中</view>
			</view>
			<view class="card-body">
				<view>
					发起人：<text>{{ todo.startUserName }}</text>、<text>{{ todo.startDeptName }}</text>
				</view>
				<view class="flex flex-center">
					<view class="flex-1">
						发起时间：{{ todo.createTime }}
					</view>
					<view>
						<view class="btn-deatil">查看详情</view>
					</view>
				</view>
			</view>
		</view>
		<view class="m-t">
			<u-empty v-if="!list.length" src="/static/tduck/null.png" text="真棒! 没有待办任务" mode="list" />
			<view v-if="list.length < total" class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: ['isHome'],
		data() {
			return {
				show: false,
				query: {
					current: 1,
					size: 20,
				},
				loadStatus: 'loadmore',
				list: [],
				total: 0,
			};
		},
		created() {
			uni.$on('refreshData', (type) => {
				if (type === 0) {
					this.list = []
					this.loadList()
				}
			})
			if (this.isHome){
				return
			}
			this.loadList()
		},
		methods: {
			onRefresh() {

			},
			toHandle(task) {
				console.log(task)
				let params = JSON.stringify({
					taskId: task.taskId,
					deployId: task.deployId,
					taskDefKey: task.taskDefKey,
					procInsId: task.procInsId,
					operated: true,
					token: this.vuex_token
				})
				const weUrl = this.$u.api.getWebBaseUrl() + `/project/workflow/form/mobileHandle`
				console.log(weUrl);
				uni.navigateTo({
					url: `/pages/common/webview?url=${weUrl}&params=${params}`
				})
			},
			loadMore() {
				if (this.list.length >= this.total || this.loadStatus === 'loading') {
					return;
				}
				this.loadStatus = "loading";
				this.query.current = this.query.current + 1;
				this.$nextTick(() => {
					this.loadList();
				})
			},
			loadList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.api.workflow.getTodoList(this.query).then(res => {
					if (!res.records || res.records.length == 0 || this.list.length >= res.total) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.records);
					this.total = res.total;
					this.loadStatus = "loadmore";
					uni.hideLoading();
				});
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.loadList();
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $u-bg-color;
	}

	.card-header-tag {
		font-size: 25.36rpx;
		color: #fff;
		padding: 7.25rpx 18.12rpx;
		margin-left: 27.17rpx;
		background-color: #F4935F;
		border-radius: 7.25rpx;
	}

	.card-body {
		color: #AAAAAA;
		font-size: 25.36rpx;
	}

	.btn-deatil {
		width: 144.93rpx;
		height: 50.72rpx;
		line-height: 50.72rpx;
		font-size: 25.36rpx;
		border: 1px solid #1BA6FC;
		text-align: center;
		border-radius: 9.06rpx;
		color: #1BA6FC;
	}
</style>
